<template>
    <div class="container">
        <m-header>已缴记录</m-header>
        <div class="main">
            <div class="content">
                <div class="list-wrap">
                    <m-list :total="total" :cur-num="list.length" v-model="loading" @load="getDataList" :load-end="loadEnd">
                        <div class="item-wrap" v-for="(item,index) in list" :key="index" @click="toDetail(item.row_id)">
                            <div class="item-box">
                                <div class="item-top">
                                    <span class="title">订单号：{{item.out_trade_no}}</span>
                                </div>
                                <ul class="item-mid">
                                    <li>实收：<span class="price">￥{{item.cost}}</span></li>
                                    <li>学校：{{item.school_name || ''}}</li>
                                    <li>班别：{{item.class_ || ''}}</li>
                                    <li>姓名：{{item.passengers_name || ''}}</li>
                                    <li>考号：{{item.identification_no || ''}}</li>
                                    <li>应收校车费：{{item.original_price || ''}}</li>
                                    <li>已付清：{{item.is_pay_off ? '是': '否'}}</li>
                                </ul>
                                <!--<div class="item-bot">
                                    有效时间：{{item.effective_time_start}} - {{item.effective_time_end}}
                                </div>-->
                                <div class="item-arrow">
                                    <van-icon class="arrow" name="arrow" color="#202020" size="20"></van-icon>
                                </div>
                            </div>
                        </div>
                    </m-list>
                </div>
            </div>
        </div>
        <m-select v-model="show" :options="options" @select="onSelect"></m-select>
    </div>
<!---->
</template>

<script>
  import list from '@/components/list/list';
  import select from '@/components/select/select';
  import {getMyAfterPayment} from "../../request/api";
  export default {
    name: "paidList",
    components: {
      "m-list": list,
      "m-select": select
    },
    filters: {
      statusClass(status) {
        return status === '待支付' ? 'dzf'
          : status === '待使用' ? 'dsy'
            : status === '使用中' ? 'syz'
              :status === '申请退票中' ? 'sqtpz'
                : status === '已退票' ? 'ytp'
                  : status === '购票失败' ? 'gpsbtk'
                    : 'ysy'
      },
    },
    data() {
      return {
        list: [],
        total: 0,
        size: 10,
        no:1,
        loading: false,
        loadEnd: true,

        filterStatus: '全部',
        show: false,
        options:['全部','待支付','已支付','购票失败','申请退票中','已退票'],
      }
    },
    methods: {
      getDataList(first){
        let {no,size,loadEnd,filterStatus} = this,  //当前请求页数
          list = [];
        no = first ? 1 : no;
        let param = {
          'page.no':no,
          'page.size': size,
        }
        getMyAfterPayment(param).then(res => {
          let {errcode ,row,total} = res;
          if (errcode !== 0)return;

          if (!first){list = this.list}
          list = [...list,...row];
          this.list = list;
          this.loadEnd = !loadEnd;
          this.no = ++no;
          this.total = total
        })
      },

      onShow(){
        this.show = true;
      },
      onSelect(e){
        this.filterStatus = e;
        this.loading = true;
        this.list = [];
        this.total = 0;
        this.no = 1;
        this.getDataList()
      },
      toDetail(id){
        this.$router.push({ path: '/paidDetail', query: { id } })
      }
    }
  }
</script>

<style scoped lang="less">
    .main{
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        .filter-wrap{
            padding: 0 10px;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #2E2E2E;
            span{
                margin-right: 5px;
            }
        }
        .content{
            flex: 1;
            height: 0;
            .list-wrap{
                height: 100%;
                box-sizing: border-box;
                .item-wrap{
                    padding: 0 10px;
                    margin-bottom: 10px;
                    & + .item-wrap{
                        margin-top: 10px;
                    }
                    .item-box{
                        background: #fff;
                        border-radius: 5px;
                        position: relative;
                        .item-top{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 12px 15px;
                            .title{
                                color: #2e2e2e;
                                font-weight: bold;
                                font-size: 15px;
                            }
                            .status{
                                font-size: 14px;
                                &.syz,&.dsy,&.dzf{
                                    color: #24C373;
                                }
                                &.ytp,&.gpsbtk{
                                    color: #FF1313;
                                }
                                &.ysy{
                                    color: #B3B3B3;
                                }
                                &.sqtpz{
                                    color: #FF7913;
                                }
                            }
                        }
                        .item-mid{
                            color: #2e2e2e;
                            font-size: 15px;
                            padding: 0 15px 10px;
                            line-height: 24px;
                            .price{
                                font-size: 20px;
                                font-weight: bold;
                            }
                        }
                        .item-bot{
                            border-top: 1px solid #dedede;
                            padding: 0 15px;
                            height: 37px;
                            display: flex;
                            align-items: center;
                            font-size: 12px;
                        }
                        .item-arrow{
                            position: absolute;
                            top: calc((100% - 27px)/2);
                            transform: translateY(-50%);
                            right: 13px;
                        }
                    }
                }
            }
        }
    }
</style>
